<template>
  <view class="page">
    <scroll-view class="page-scroll-view" scroll-y="true">
      <view
        class="top-img"
        :style="`--img: url(${base_url}/static/mainpagelogo.jpg)`"
      ></view>
      <view class="tap-list">
        <view
          class="tap"
          v-for="item in tapList"
          @click="jmpHoleTypePg(item.id)"
          :style="`color: ${item.tc}; background-color: ${item.bc}`"
          :key="item.id"
        >
          #{{ item.text }}
        </view>
      </view>
      <view class="treehole-list">
        <Hole
          v-for="item in holeList"
          :key="item.id"
          :avatar="item.avatar"
          :username="item.username"
          :date="item.date"
          :type="item.type"
          :title="item.title"
          :description="item.description"
          :imageUrl="item.imageUrl"
          :commentList="item.commentList"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { post } from "../../service/post";
import { base_url } from "../../api/config";

import Hole from "../../components/treeHole/Hole.vue";

// 树洞类型标签
const tapList = ref([
  { id: 1, text: "", tc: "#efefef", bc: "#efefef" },
  { id: 2, text: "", tc: "#efefef", bc: "#efefef" },
  { id: 3, text: "", tc: "#efefef", bc: "#efefef" },
  { id: 4, text: "", tc: "#efefef", bc: "#efefef" },
  { id: 5, text: "", tc: "#efefef", bc: "#efefef" },
  { id: 6, text: "", tc: "#efefef", bc: "#efefef" },
]);

// 树洞内容
const holeList = ref([
  // {
  //   id: 1,
  //   avatar: "/static/default_avatar.jpg",
  //   username: "大学生心灵树洞",
  //   date: "2025-6-6 18:00:00",
  //   type: "情绪情感",
  //   title: "六月心事，等你诉说",
  //   description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`,
  //   imageUrl: "/static/hole_default.jpg",
  //   commentList: [
  //     {
  //       id: 1,
  //       avatar: "/static/default_avatar.jpg",
  //       name: "陈树洞",
  //       text: "考完试我一定要去海边！！！",
  //       time: "2小时前",
  //     },
  //     {
  //       id: 2,
  //       avatar: "/static/default_avatar.jpg",
  //       name: "树小洞2025",
  //       text: "未来要干嘛啊！！好焦虑。。。。",
  //       time: "2小时前",
  //     },
  //   ],
  // },
]);

function jmpHoleTypePg(id) {
  uni.navigateTo({
    url: "/pages/treehole/holeType?id=" + id,
  });
}

// 获取帖子类型
post.getPostType(tapList);

const perGetCount = 4; // 每次获取的帖子数量
let nextCursor = null;

async function getMorePost(cursor, limit) {
  const data = await post.getPostList(cursor, limit);
  return data;
}

async function initGet() {
  const data = await getMorePost(undefined, perGetCount);
  nextCursor = data.nextCursor;
  holeList.value = data.items;
}
initGet()

async function onReachBottom() {
  if (!nextCursor) {
    return;
  }
  const data = await getMorePost(nextCursor, perGetCount);
  nextCursor = data.nextCursor;
  if (data.items.length > 0) {
    holeList.value.push(...data.items);
  }
}

async function onRefresh() {
  nextCursor = null;
  holeList.value = [];
  await initGet();
  uni.stopPullDownRefresh();
}

defineExpose({
  onReachBottom,
  onRefresh,
});

</script>

<style scoped lang="less">
.page {
  .page-scroll-view {
    width: 100%;
    height: 100%;
  }

  .top-img {
    width: 100vw;
    height: 70vw;
    background-color: rgb(255, 251, 203);
    background-image: var(--img);
    background-repeat: no-repeat;
    background-position: 50% 90%;
    background-size: 46%;
  }

  .tap-list {
    width: 100vw;
    height: 25vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    gap: 3vw;
    border-bottom: 0.2vw solid rgb(231, 231, 231);

    .tap {
      --h: 7vw;
      width: 25vw;
      height: var(--h);
      text-align: center;
      line-height: var(--h);
      border-radius: 7vw;
      font-weight: 900;
      font-size: 4vw;
    }
  }

  .treehole-list {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 30vw;
    }
  }
}
</style>
